---
import BestPracticeHeader from '../../../components/BestPracticeHeader.astro';
import CaptchaScripts from '../../../components/Captcha/CaptchaScripts.astro';
import FrameRenderer from '../../../components/FrameRenderer/FrameRenderer.astro';
import MarkdownFile from '../../../components/MarkdownFile.astro';
import ShareIcons from '../../../components/ShareIcons/ShareIcons.astro';
import TopicOverlay from '../../../components/TopicOverlay/TopicOverlay.astro';
import UpcomingForm from '../../../components/UpcomingForm.astro';
import BaseLayout from '../../../layouts/BaseLayout.astro';
import { BestPracticeFrontmatter, getBestPracticeIds } from '../../../lib/best-pratice';
import { generateArticleSchema } from '../../../lib/jsonld-schema';

export async function getStaticPaths() {
  const bestPracticeIds = await getBestPracticeIds();

  return bestPracticeIds.map((bestPracticeId) => ({
    params: { bestPracticeId },
  }));
}

interface Params extends Record<string, string | undefined> {
  bestPracticeId: string;
}

const { bestPracticeId } = Astro.params as Params;
const bestPracticeFile = await import(`../../../data/best-practices/${bestPracticeId}/${bestPracticeId}.md`);
const bestPracticeData = bestPracticeFile.frontmatter as BestPracticeFrontmatter;

let jsonLdSchema = [];

if (bestPracticeData.schema) {
  const bestPracticeSchema = bestPracticeData.schema;
  jsonLdSchema.push(
    generateArticleSchema({
      url: `https://roadmap.sh/best-practices/${bestPracticeId}`,
      headline: bestPracticeSchema.headline,
      description: bestPracticeSchema.description,
      datePublished: bestPracticeSchema.datePublished,
      dateModified: bestPracticeSchema.dateModified,
      imageUrl: bestPracticeSchema.imageUrl,
    })
  );
}

const contentContributionLink = `https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/best-practices/${bestPracticeId}/content`;
---

<BaseLayout
  permalink={`/best-practices/${bestPracticeId}`}
  title={bestPracticeData?.seo?.title}
  description={bestPracticeData.seo.description}
  keywords={bestPracticeData.seo.keywords}
  sponsor={bestPracticeData.sponsor}
  noIndex={bestPracticeData.isUpcoming}
  jsonLd={jsonLdSchema}
>
  <!-- Preload the font being used in the renderer -->
  <link rel='preload' href='/fonts/balsamiq.woff2' as='font' type='font/woff2' crossorigin slot='after-header' />

  <BestPracticeHeader
    title={bestPracticeData.title}
    description={bestPracticeData.description}
    bestPracticeId={bestPracticeId}
    isUpcoming={bestPracticeData.isUpcoming}
  />

  <div class='bg-gray-50 py-4 sm:py-12'>
    {
      !bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
        <div class='max-w-[1000px] container relative'>
          <ShareIcons
            description={bestPracticeData.briefDescription}
            pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
          />
          <TopicOverlay contentContributionLink={contentContributionLink} />

          <FrameRenderer
            resourceType={'best-practice'}
            resourceId={bestPracticeId}
            jsonUrl={bestPracticeData.jsonUrl}
            dimensions={bestPracticeData.dimensions}
          />
        </div>
      )
    }

    {
      !bestPracticeData.isUpcoming && !bestPracticeData.jsonUrl && (
        <MarkdownFile>
          <bestPracticeFile.Content />
        </MarkdownFile>
      )
    }
  </div>

  {bestPracticeData.isUpcoming && <UpcomingForm />}
</BaseLayout>
